.slider {
  width: 280px;
  font-size: 14px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 6px;
  padding: 16px;
  .module {
    font-size: 14px;
    .title {
      font-size: 14px;
      line-height: 22px;
      color: #505667;
      position: relative;
      padding-left: 12px;
      margin-bottom: 16px;
      &.un-first {
        margin-top: 24px;
      }
      .line {
        position: absolute;
        top: 4px;
        left: 0;
        width: 3px;
        background-color: rgb(39, 41, 44);
        height: 14px;
      }
    }
    .content {
      .box {
        height: 72px;
        margin-bottom: 12px;
        background-color: #fbfbfb;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 22px;
        border-radius: 8px;
        cursor: pointer;
        position: relative;
        user-select: none;
        &:hover {
          .info {
            .tips {
              display: block;
            }
            .action {
              display: inline-flex;
            }
          }
        }
        .info {
          display: flex;
          .icon {
            width: 16px;
            height: 16px;
            background: url('../../../../../assets/icon/work.png') no-repeat;
            background-size: cover;
            margin-top: 2px;
            margin-right: 8px;
          }
          .text {
            .name {
              font-size: 14px;
              color: #505667;
            }
            .summary {
              font-size: 12px;
              color: #aeb2bd;
              margin-top: 4px;
              word-break: keep-all;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
          .tips {
            position: absolute;
            right: 0;
            top: 0;
            width: 60px;
            height: 20px;
            line-height: 20px;
            background-color: #505667;
            font-size: 12px;
            color: #ffffff;
            text-align: center;
            display: none;
            border-top-right-radius: 8px;
            border-bottom-left-radius: 8px;
          }
          .action {
            position: absolute;
            right: 0;
            top: 18px;
            width: 40px;
            display: none;
            height: 20px;
            .edit {
              width: 16px;
              height: 16px;
              background: url('../../../../../assets/icon/edit.png') no-repeat;
              background-size: cover;
              margin-right: 8px;
            }
            .delete {
              width: 16px;
              height: 16px;
              background: url('../../../../../assets/icon/delete.png') no-repeat;
              background-size: cover;
            }
            .add {
              width: 16px;
              height: 16px;
              background: url('../../../../../assets/icon/add.png') no-repeat;
              background-size: cover;
            }
          }
        }
      }
    }
  }
}
